<template>
  <view>
    <z-paging @pageScroll="pageScroll" :refresher-enabled="false">
      <!-- 星空背景 -->
      <ParticleBackground />
      <view style="height: 200rpx;"></view>
      <view class="logo_box">
        <image class="" src="https://image.dingxians.cn/image/2025-09-16/003645241.jpg" />
      </view>
      <view class="welcom_box">
        欢迎登录云樵
      </view>
      <view class="logopng_box"
        style="background-image: url('https://kimi.dingxians.cn/upload/static/indexdet/login/login_center.png');">
      </view>
      <view class="annniu_box" :class="loginType == 0 ? 'annniu_box1' : ''" >
        <!-- 微信授权 -->
        <view class="left_annniu_box">
          <image v-if="!agreeSta" class="" src="https://kimi.dingxians.cn/upload/static/indexdet/login/sq.png" />
          <image v-else @click="wx_login" class=""
            src="https://kimi.dingxians.cn/upload/static/indexdet/login/sel_sq.png" />
        </view>
        <!-- 手机号登录 -->
        <view class="right_annniu_box" @click="toCall" v-if="loginType == 1">
          <image v-if="!agreeSta" class="" src="https://kimi.dingxians.cn/upload/static/indexdet/login/call.png" />
          <image v-else class="" src="https://kimi.dingxians.cn/upload/static/indexdet/login/sel_call.png" />
        </view>
      </view>
      <view class="xieyi_box" :style="{ opacity: agreeSta ? '1' : '0.5' }">
        <view class="left_sel_agree_box" @click="agrClick">
          <view class="center_sta_box" v-if="agreeSta"></view>
        </view>
        <view class="left_sel_agree_text_box">我已阅读并同意云樵
          <text style="color: #FBE7BF;"
            @click="$router('/login/agree?status=' + 'user_agree' + '&title=' + '用户协议')">《用户协议》</text>和
          <text style="color: #FBE7BF;"
            @click="$router('/login/agree?status=' + 'user_agree' + '&title=' + '隐私政策')">《隐私政策》</text>
        </view>
      </view>

      <!-- 小程序获取头像昵称弹窗 -->
      <u-popup v-model="getnickshow" mode="bottom" :show="getnickshow" round='16rpx' :mask-close-able="false">
        <view class="getnickbox">

          <view class="flex_align_center">
            <image :src="project.logo" class="logoimg" mode="aspectFit"></image>
            <view class="name">
              {{ project.name }}
              <text>申请</text>
            </view>
          </view>
          <view class="m1 mt30">获取你的头像、昵称</view>
          <view class="m2">展示个人信息</view>
          <view class="xin1">
            <button type="default" class="flex_spacebetween buttoncss" open-type="chooseAvatar"
              @chooseavatar="chooseavatar">
              <view class="flex_align_center toubox">
                <view class="t1">头像</view>
                <image v-if="avatarUrl == ''" src="https://morgan.dingxians.cn/upload/images/user/avatar.png"
                  class="avatarimg">
                </image>
                <image v-else :src="avatarUrl" class="avatarimg"></image>
              </view>
              <u-icon name="arrow-right" size="25" color="#999"></u-icon>
            </button>
          </view>
          <view class="nick">
            <view class="n1">昵称:</view>
            <input type="nickname" @blur="bindBlur" v-model="wxNickname" placeholder="点击获取昵称">
          </view>
          <view class="nick">
            <view class="n1">手机号:</view>
            <button class="phone_box" open-type="getPhoneNumber" @getphonenumber="headgetphonenumber">

              <text class="dhh_box" v-if="phoneNumber">{{ phoneNumber || '' }}</text>
              <text v-else>点击获取手机号</text>
            </button>

          </view>
          <view class="enter_box" @click="loginWeixin">
            确认
          </view>
        </view>
      </u-popup>
    </z-paging>
  </view>

</template>
<script>
export default {
  components: {

  },
  data() {
    return {
      tabbarId: 1,//默认首页
      scrollTop: '',//距离顶部的距离
      agreeSta: false,//同意协议
      loginType: 1,
      getnickshow: false,//小程序获取昵称头像弹窗
      project: {//小程序名字/logo
        name: '',
        logo: '',
      },
      avatarUrl: '',//获取的用户头像
      wxNickname: "",
      phoneNumber: '',
      token: '',
    };
  },

  onLoad(e) {
  },
  onShow() {
    uni.$emit("onPageScroll", 0)
    this.usersHide_wx_login()
    // #ifdef MP-WEIXIN
    this.getProgram()
    // #endif
  },

  methods: {
    // 监听滚动高度
    pageScroll(event) {
      uni.$emit("onPageScroll", event.detail.scrollTop)
    },
    agrClick() {
      this.agreeSta = !this.agreeSta
    },
    toCall() {
      if (!this.agreeSta) {
        this.$msg('请先同意协议')
      } else {
        this.$router('/login/call')
      }
    },
    // 登录方式
    usersHide_wx_login() {
      this.$Request.get(this.$api.logins.usersHide_wx_login).then(res => {
        if (res.code == 200) {
          this.loginType = res.msg
        }
      })
    },
    wx_login() {//微信登录
      // #ifdef APP-PLUS
      this.appLogin()
      // #endif
      // #ifdef MP-WEIXIN
      this.wxregirst()
      // #endif
    },
    // app微信登录
    appLogin() {
      uni.login({
        "provider": "weixin",
        "onlyAuthorize": true, // 微信登录仅请求授权认证
        success: (event) => {
          let data = {
            code: event.code,
          }
          this.$Request.post(this.$api.logins.usersWx_login, data).then(res => {
            if (res.code == 200) {
              console.log(res)
              uni.setStorageSync('userInfo', res.data)
              if (res.data.is_mobile) {
                uni.setStorageSync('token', res.data.token)
                console.log('已经绑定')
                setTimeout(() => {
                  uni.switchTab({
                    url: '/pages/index/index'
                  })
                })
              } else {
                console.log('未绑定')
                setTimeout(() => {
                  uni.redirectTo({
                    url: '/userspage/logincall?token=' + res.data.token + '&bind=' + 1
                  })
                }, 1000)
              }
            }

          })
        },
        fail: function (errs) {
          // 登录授权失败
          console.log(errs, "errs")
        }
      })
    },
    // 微信登录
    wxregirst() {
      uni.showLoading({
        title: '登录中'
      })
      let that = this
      uni.login({
        provider: 'weixin',
        success: (res) => {
          that.getUser(res.code)
        },
        fail: function (err) {
          console.log("登录授权失败", err);
        }
      })

    },
    // 登录
    getUser(js_code) {
      console.log(js_code)
      let data = {
        js_code,
        scene: uni.getStorageSync('bind_id')
      }
      console.log(data)
      this.$Request.post(this.$api.logins.usersMini_login, data).then(res => {
        if (res.code == 200) {
          this.token = res.data.token
          if (res.data.is_mobile) {
            uni.hideLoading()
            this.$msg('登录成功')

            uni.setStorageSync("sx", true)
            uni.setStorageSync("token", this.token)
            uni.setStorageSync('userInfo', res.data)
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/index'
              })
            }, 600)
          } else {
            this.getnickshow = true
          }

        }
      })
    },
    // 获取小程序的 logo 和 名称
    getProgram() {
      uni.getSystemInfo({
        success: (res) => {
          console.log(res)
          this.project.name = res.appName
        }
      })
      this.project.logo = __wxConfig.accountInfo.icon
    },
    // 获取头像
    chooseavatar(e) {
      let file = e.detail.avatarUrl
      var uploadurl = "https://morgan.dingxians.cn/api/common/upload?token=" + this.token
      uni.uploadFile({
        url: uploadurl,
        filePath: file,
        name: 'file',
        // formData: {
        //     'openid': this.openId
        // },
        success: (res) => {
          let urlData = JSON.parse(res.data)
          this.avatarUrl = urlData.data.url



        }
      });
    },
    // 获取昵称
    bindBlur(e) {
      this.wxNickname = e.detail.value
    },
    // 获取手机号
    headgetphonenumber(e) {
      let data = {
        code: e.detail.code
      }
      console.log(data)
      this.$Request.post(this.$api.logins.usersGetMobile + '?token=' + `${this.token}`, data).then(res => {
        if (res.code == 200) {
          this.phoneNumber = res.mobile
        }
      })
    },
    // 确认微信登录
    loginWeixin() {
      if (this.nickname == '' && this.file == '' && this.phoneNumber == '') {
        this.$msg('请获取头像，昵称，手机号')
      } else if (this.wxNickname == '') {
        this.$msg('请输入昵称')
      } else if (this.avatarUrl == '') {
        this.$msg('请选择头像')
      } else if (this.phoneNumber == '') {
        this.$msg('请输入手机号')
      } else {
        this.editInfo()
      }
    },
    // 修改信息
    editInfo() {
      let data = {
        nickname: this.wxNickname,
        avatar: this.avatarUrl,
      }
      this.$Request.put(this.$api.user.users + '?token=' + `${this.token}`, data).then(res => {
        if (res.code == 200) {
          this.$msg('登录成功')
          uni.setStorageSync("sx", true)
          uni.setStorageSync("token", this.token)
          uni.setStorageSync('userInfo', res.data)
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 600)
        }
      })

    },

  }
};
</script>

<style lang="scss" scoped>
/deep/.zp-scroll-view-absolute {
  background-image: none !important;
  background-color: #000 !important;
}

.logo_box {
  width: 200rpx;
  height: 200rpx;
  margin: auto;

  image {
    width: 100%;
    height: 100%;
  }
}

.welcom_box {
  width: 100%;
  height: 32rpx;
  line-height: 32rpx;
  font-family: hzgb;
  font-weight: 400;
  font-size: 34rpx;
  color: #ffffff;
  text-align: center;
  margin-bottom: 235rpx;
}

.logopng_box {
  width: 372rpx;
  height: 372rpx;
  background-size: 100% 100%;
  margin: auto;
  margin-bottom: 295rpx;
}

.annniu_box {
  width: 100%;
  box-sizing: border-box;
  padding: 0 54rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 106rpx;

  &.annniu_box1 {
    justify-content: center;
  }
}

.left_annniu_box,
.right_annniu_box {
  width: 301rpx;
  height: 61rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.xieyi_box {
  width: 100%;
  height: 31rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .left_sel_agree_box {
    width: 31rpx;
    height: 31rpx;
    border-radius: 5rpx;
    border: 1px solid #fae5ba;
    margin-right: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .center_sta_box {
      width: 16rpx;
      height: 16rpx;
      background: #fae5ba;
      border-radius: 5rpx;
    }
  }

  .left_sel_agree_text_box {
    height: 24rpx;
    line-height: 24rpx;
    font-family: Source Han Serif CN;
    font-weight: bold;
    font-size: 24rpx;
    color: #ffffff;
  }
}



// 小程序获取昵称头像弹窗
.getnickbox {
  padding: 40rpx 20rpx;
  border-radius: 30rpx 30rpx 0 0;
  background-color: #fff;

  .logoimg {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
  }

  .name {
    margin-left: 20rpx;

    text {
      margin-left: 10rpx;
    }
  }

  .m1 {
    font-weight: 500;
  }

  .m2 {
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f2f2f2;
    color: #999;
    padding-top: 10rpx;
    font-size: 24rpx;
  }

  .xin1 {
    border-bottom: 1rpx solid #f2f2f2;
    margin-bottom: 30rpx;

    .toubox {
      padding: 10rpx 0;
      display: flex;
      align-items: center;

      .t1 {
        font-size: 28rpx;
        margin-right: 30rpx;
      }

      .avatarbox {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        border: 1rpx solid #f2f2f2;
      }

      .avatarimg {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
    }
  }


  .buttoncss {
    background-color: #fff;
    border-radius: 0px;
    border: 0rpx solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  button::after {
    border: 0px solid rgba(0, 0, 0, .2);
  }

  .nick {
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid #f2f2f2;
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 14px;
    margin-bottom: 10rpx;

    .n1 {
      font-size: 28rpx;
      margin-right: 30rpx;
    }

    .phone_box {
      background: none;
      width: 530rpx;
      font-size: 28rpx;
      color: #999;
      text-align: left;
      padding-left: 0;
    }

    .dhh_box {
      color: #333;
    }
  }

  .enter_box {
    width: 280rpx;
    height: 100rpx;
    border-radius: 20rpx;
    background: rgba(26, 194, 121, 1);
    margin: 10rpx auto;
    text-align: center;
    line-height: 100rpx;
    font-size: 36rpx;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);

  }

  .mt30 {
    margin-top: 30rpx;
  }
}
</style>
